{% extends "smErp/base.html" %}

{% block css_style %}
    {% load staticfiles %}
    <link href="{% static 'smErp/css/register.css' %}" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
{% endblock %}



{% block content %}
    <!-- 二级导航 -->
    <div class="inner wrp app_list">
        <div class="container_box cell_layout">
            <div class="col_side">
                <div class="menu_box">
                    <ul id="statistics_menu" class="statistics_menu">
                        <li class="menu_item first selected">
                            <a href="javascript:;" data-page="sao_code" class="menu_link jsUrlLink ">扫码记录</a>
                        </li>
                        <li class="menu_item">
                            <a href="javascript:;" data-page="except_log"  class="menu_link jsUrlLink">异常记录</a>
                        </li>
                        <li class="menu_item">
                            <a href="javascript:;" data-page="scode_statistics" class="menu_link jsUrlLink">扫码统计</a>
                        </li>
                        <li class="menu_item">
                            <a href="javascript:;" data-page="feedback" class="menu_link jsUrlLink">反馈留言</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 扫码记录 -->
            <div class="col_main" id="scan_code_body">
                <table class="table mp_account" id="scan_code_table"  cellspacing="0" width="100%">
                    <thead class="thead">
                    <tr>
                        <th class="table_cell content">日期</th>
                        <th class="table_cell content">溯码</th>
                        <th class="table_cell content">ip</th>
                        <th class="table_cell content">地区</th>
                        <th class="table_cell content">手机型号</th>
                    </tr>
                    </thead>
                    <tbody class="tbody" id="suma_publish_tb">
                    <td colspan="5">
                        <p class="empty_tips">暂无数据</p>
                    </td>
                    </tbody>
                </table>
            </div>
             <!-- 异常记录 -->
            <div class="col_main" id="except_log_body" style="display: none;">
                <table class="table mp_account" id="except_log_table"  cellspacing="0" width="100%">
                    <thead class="thead">
                    <tr>
                        <th class="table_cell content">溯码</th>
                        <th class="table_cell content">扫描次数</th>
                        <th class="table_cell content">原因</th>
                        <th class="table_cell content">操作</th>
                    </tr>
                    </thead>
                    <tbody class="tbody" id="except_log_tb">
                    <td colspan="4">
                        <p class="empty_tips">暂无数据</p>
                    </td>
                    </tbody>
                </table>
            </div>

             <!-- 扫码统计 -->
            <div class="col_main" id="scode_statistics_body" style="display: none;">
                <div class="main_hd suma_main_hd">
                    <div class="main_hd_box">
                        <h2>扫码统计</h2>
                    </div>
                </div>
                <div class="main_bd">
                    <div class="chart-container" width="400" height="400">
                        <canvas id="myChart" name="mychart"></canvas>
                    </div>
                </div>
            </div>
            <!-- 反馈留言 -->
            <div class="col_main" id="feedback_body" style="display: none;">
                <table class="table mp_account" id="feedback_table"  cellspacing="0" width="100%">
                    <thead class="thead">
                    <tr>
                        <th class="table_cell content">id</th>
                        <th class="table_cell content">产品</th>
                        <th class="table_cell content">反馈类型</th>
                        <th class="table_cell content">内容</th>
                        <th class="table_cell content">处理状态</th>
                    </tr>
                    </thead>
                    <tbody class="tbody" id="suma_publish_tb">
                    <td colspan="6">
                        <p class="empty_tips">暂无数据</p>
                    </td>
                    </tbody>
                </table>
            </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footscript %}
    <script type="text/javascript" src="{% static 'smErp/js/common.js' %}"></script>
    <script>
        // 设置主菜单
        window.nav.selected("statistics");
        var selected_page = $("#statistics_menu").children("li[class='menu_item first selected']");
        // 表格
        var scan_code_table ;
        var except_log_table ;
        var feedback_table;
        function getCookie(c_name)
        {
            if (document.cookie.length>0)
            {
                c_start=document.cookie.indexOf(c_name + "=");
                if (c_start!=-1)
                {
                    c_start=c_start + c_name.length+1;
                    c_end=document.cookie.indexOf(";",c_start);
                    if (c_end==-1) c_end=document.cookie.length;
                    return unescape(document.cookie.substring(c_start,c_end))
                }
            }
            return ""
        }

        function show_menu_nav_page(apptype){
{#            alert(apptype);#}
            if(apptype == 'sao_code'){
                $("#scan_code_body").show();
                $("#except_log_body").hide();
                $("#scode_statistics_body").hide();
                $("#feedback_body").hide();
                scan_code_table.ajax.reload();

            }else if(apptype == 'except_log'){
                $("#scan_code_body").hide();
                $("#except_log_body").show();
                $("#scode_statistics_body").hide();
                $("#feedback_body").hide();
                except_log_table.ajax.reload();

            }else if(apptype == 'scode_statistics'){
                $("#scan_code_body").hide();
                $("#except_log_body").hide();
                $("#scode_statistics_body").show();
                $("#feedback_body").hide();

            }else if(apptype == 'feedback'){
                $("#scan_code_body").hide();
                $("#except_log_body").hide();
                $("#scode_statistics_body").hide();
                $("#feedback_body").show();
                feedback_table.ajax.reload();
            }else{
                return ;
            }

        }

        // 初始化溯码扫描表格
        function init_scan_code_table(){
            scan_code_table = $('#scan_code_table').DataTable({
                dom: 't<"wrapper"ip>',
                buttons:['csv','copy'],
                "ajax": {
                    "url": "{% url 'smErp:suma_scan_code' %}",
                    "dataSrc": "data",
                    "type": "POST",
                    "data": function (d) {
                        d.csrfmiddlewaretoken = getCookie("csrftoken");
                    }
                },
                order: [0, 'desc'],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                "columns": [
                    {"data": "create_time"},
                    {"data": "smcode_no"},
                    {"data": "scan_ip"},
                    {"data": "scan_province"},
                    {"data": "scan_ptype"},
                ],
                "language": table_lanage,
            });
        }

        // 初始化异常记录表格
        function init_abnormal_log_table(){
            except_log_table = $('#except_log_table').DataTable({
                dom: 't<"wrapper"ip>',
                "ajax": {
                    "url": "{% url 'smErp:suma_scan_abnormal' %}",
                    "dataSrc": "data",
                    "type": "POST",
                    "data": function (d) {
                        d.csrfmiddlewaretoken = getCookie("csrftoken");
                    }
                },
                order: [0, 'desc'],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                "columns": [
                    {"data": "smcode_no"},
                    {"data": "scan_count"},
                    {"data": "type_ch"},
                    {"data": "create_time"},
                ],
                "language": table_lanage,
            });
        }

        // 初始化用户反馈记录表格
        function init_feedback_table(){
            feedback_table = $('#feedback_table').DataTable({
                dom: 't<"wrapper"ip>',
                "ajax": {
                    "url": "{% url 'smErp:suma_scan_feedback' %}",
                    "dataSrc": "data",
                    "type": "POST",
                    "data": function (d) {
                        d.csrfmiddlewaretoken = getCookie("csrftoken");
                    }
                },
                order: [0, 'desc'],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                "columns": [
                    {"data": "id"},
                    {"data": "product_name"},
                    {"data": "type"},
                    {"data": "content"},
                    {"data": "create_time"},
                ],
                "language": table_lanage,
            });
        }

        // 初始化扫描记录
        init_scan_code_table();
        // 初始化异常记录
        init_abnormal_log_table();
        // 用户反馈表格
        init_feedback_table();

        $(".menu_link").on('click',function(){
{#            alert($(this).data("page"));#}
            selected_page.removeClass("selected");
            $(this).parent().addClass("selected");
            selected_page = $(this).parent();
            show_menu_nav_page($(this).data("page"));

        });
        var data = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    label: '# 产品1',
                    pointBorderColor : "rgba(220,220,220,1)",
                    pointBackgroundColor : "#fff",
                    fill : "#fff",
                    data : [65,59,90,81,56,55,40]
                }
            ]
        };

        var ctx = document.getElementById("myChart").getContext("2d");
        var myNewChart = new Chart(ctx,{
            type: 'line',
            data: data,
            options: {
                 bezierCurve : false,
            }
        })
    </script>
{% endblock %}




